﻿<template>
    <div class="page advance-search-page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title">
                <div class="title text-color-primary">高级搜索</div>
                <div class="right">
                    <!-- 关闭弹窗 -->
                    <a class="link popup-close color-primary" data-popup="#advance-search-popup">
                        <i class="icon f7-icons if-not-md">xmark_circle</i>
                        <i class="icon material-icons md-only ">xmark_circle</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="page-content">
            <form class="list list-strong-ios list-outline-ios list-dividers-ios form-store-data" id="advance-search-form">
                <ul>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">检查号</div>
                            <div class="item-input-wrap">
                                <input name="accessionNumber" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">姓名</div>
                            <div class="item-input-wrap">
                                <input name="name" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">性别</div>
                            <div class="item-input-wrap input-dropdown-wrap">
                                <select name="patientSex" placeholder="选择性别" value="" id="select-sex">
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                    <option value="2">其他</option>
                                </select>
                                <span class="input-clear-button" id="clear-sex"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">患者Id</div>
                            <div class="item-input-wrap">
                                <input name="patientId" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">预约编号</div>
                            <div class="item-input-wrap">
                                <input name="appointmentNumber" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">门诊号</div>
                            <div class="item-input-wrap">
                                <input name="outPatientNumber" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">住院号</div>
                            <div class="item-input-wrap">
                                <input name="inPatientNumber" type="text"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">联系方式</div>
                            <div class="item-input-wrap">
                                <input name="phoneNumber" type="tel"  />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">证件号</div>
                            <div class="item-input-wrap">
                                <input name="idCardNumber" type="text"/>
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">日期范围</div>
                            <div class="item-input-wrap">
                                <input type="text" name="examTimeRange" placeholder="" readonly="readonly" id="date-range-piker" />
                                <span class="input-clear-button"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a class="item-link smart-select " data-open-in="popover"  id="exam-devices-select" >
                            <select id="select-exam-device" name="examDevices" multiple data-virtualList="true">
                            </select>
                            <span class="input-clear-button" id="clear-exam-devices"></span>
                            <div class="item-content item-input-outline" style="padding-left:0px;">
                                <div class="item-inner">
                                    <div class="item-title text-color-primary" style="margin-top:10px;font-size:12px;">设备</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="item-link smart-select " data-open-in="popover"  id="exam-category-select" >
                            <select name="examCategory" multiple data-virtualList="true" id="exam-category">
                            </select>
                            <span class="input-clear-button" id="clear-exam-category"></span>
                            <div class="item-content item-input-outline" style="padding-left:0px;">
                                <div class="item-inner">
                                    <div class="item-title text-color-primary" style="margin-top:10px;font-size:12px;">检查类别</div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <a class="link  popup-open" id="open-exam-items-popup" style="width:100%">
                            <div class="item-inner">
                                <div class="item-title item-label text-color-primary" style="color:black;">检查项目</div>
                                <div class="item-input-wrap">
                                    <textarea class="textarea resizable" placeholder="" id="exam-items"></textarea>
                                    <span class="input-clear-button" id="clear-exam-items"></span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <a class="link  popup-open " data-popup="#exam-body-parties-popup" style="width:100%">
                            <div class="item-inner">
                                <div class="item-title item-label text-color-primary" style="color:black;">检查部位</div>
                                <div class="item-input-wrap">
                                    <textarea class="textarea resizable" placeholder="" id="exam-body-parties"></textarea>
                                    <span class="input-clear-button" id="clear-exam-body-parties"></span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </form>
            <div class="buttons grid grid-cols-2 grid-gap">
                <button id="search-btn" class="button  button-raised ">搜索</button>
                <button id="reset-btn" class="button  button-raised ">重置</button>
            </div>
        </div>
        <div class="popup advance-search-popup popup-tablet-fullscreen" id="exam-items-popup">
            <div class="view view-init safe-areas" data-url="/select-exam-items/">
            </div>
        </div>
        <div class="popup advance-search-popup popup-tablet-fullscreen" id="exam-body-parties-popup">
            <div class="view view-init safe-areas" data-url="/select-exam-body-parties/">
            </div>
        </div>
    </div>
</template>
<script>
    export default (props, { $, $on, $f7, $h, $f7router, $theme, $update }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */

        let dateRangePicker;
        let examItems;
        let examBodyParties;
        let examItemsPopup;


        $on('pageInit', () => {
            let $bodyParties=$("#exam-body-parties");
            let $items = $("#exam-items");

            examItemsPopup = $f7.popup.create({
                el: "#exam-items-popup",
                preload: true
            })
            $("#open-exam-items-popup").on('click', () => {
                examItemsPopup.open();
            })
             //textarea 高度初始化
            $($bodyParties).css("height", 'auto');
            $($items).css("height", 'auto');
            $($bodyParties).css('height', `${$($bodyParties).prop('scrollHeight')}px`);
            $($items).css('height', `${$($items).prop('scrollHeight')}px`);


            // 检查项目选中确认事件
            $f7.on('selectExamItems', (values, labels) => {
                let el = $("#exam-items");
                $(el).val(labels);
                examItems = values;
                $("#exam-items").css("height", 'auto');
                $(el).css('height', `${$(el).prop('scrollHeight')}px`);
            })

            // 检查部位选中确认事件
            $f7.on('selectExamBodyParties', (values, labels) => {
                let el = $("#exam-body-parties");
                $(el).val(labels);
                examBodyParties = values;
                $(el).css('height', `${$(el).prop('scrollHeight')}px`);
            })

            // 创建日历实例
            dateRangePicker = $f7.calendar.create({
                inputEl: '#date-range-piker',
                rangePicker: true,
                dateFormat: "yyyy-mm-dd",
                closeByOutsideClick: true
            });

            // 日历验证
            dateRangePicker.on('close', () => {
                if (dateRangePicker.value && dateRangePicker.value.length === 1) {
                    dateRangePicker.setValue([]);
                }
            })

            // 重置
            $("#reset-btn").on("click", () => {
                $f7.form.fillFromData('#advance-search-form', {
                    accessionNumber: '',
                    name: '',
                    patientSex: null,
                    patientId: '',
                    appointmentNumber: '',
                    outPatientNumber: '',
                    inPatientNumber: '',
                    phoneNumber: '',
                    idCardNumber: '',
                    examTimeRange: '',
                    examCategory: '',
                    examDevices: ''
                });
                $("#exam-items").val('');
                $("#exam-body-parties").val('');
                examItems = '';
                examBodyParties = '';
            });

            // 搜索
            $("#search-btn").on("click", () => {
                let options = $f7.form.convertToData("#advance-search-form");
                if (examItems) {
                    options.examItems = examItems;
                }
                for (const prop in options) {
                    let value = options[prop]
                    if (value === "" || (Array.isArray(value) && value.length === 0) || (typeof value === 'object' && value.keys().length === 0)) {
                        delete options[prop];
                    }
                }
                if (options.examTimeRange) {
                    let times = options.examTimeRange.split(' - ');
                    options.examTimeRange = times.join(',');
                }
                if (examItems) {
                    options.examItems = examItems;
                }
                if (options.examDevices) {
                    options.examDevices = options.examDevices.join(',');
                }
                if (options.examCategory) {
                    options.examCategory = options.examCategory.join(',');
                }
                // 无任何查询条件
                if (Object.keys(options).length == 0) {
                    //警告提示;  没有任何查询条件！
                    showToastIcon();
                    return;
                }
                else {
                    $f7.emit('advanceSearch', options);
                    $f7.popup.close("#advance-search-popup", true);
                }
            })

            // 无任何查询条件，提示
            let toastNone;
            let toastNoTimeRange;
            const showToastIcon = () => {
                if (!toastNone) {
                    toastNone = $f7.toast.create({
                        icon: '<i class="f7-icons toast-icon">exclamationmark_circle</i>',
                        text: '无搜索条件',
                        position: 'center',
                        closeTimeout: 2000,
                    });
                }
                toastNone.open();
            }


            // 性别可清除
            $('#clear-sex').on('click', () => {
                $('#select-sex').val('');
                $('#clear-sex').hide();
            });
            $('#select-sex').on('change', () => {
                let vaule = $('#select-sex').val();
                if (vaule) {
                    $('#clear-sex').show();
                }
                else {
                    $('#clear-sex').hide();
                }
            })

            // 检查设备可清除
            $("#clear-exam-devices").on('click', (e) => {
                $("#select-exam-device").val('');
                $("#clear-exam-devices").hide();
                $("#exam-devices-select .item-content .item-after").html('');
                e.stopPropagation();
            });
            $("#select-exam-device").on('change', () => {
                let value = $("#select-exam-device").val();
                if (value) {
                    $("#clear-exam-devices").show();
                }
                else {
                    $("#clear-exam-devices").hide();
                }
            })

            // 检查项目可清除
            $("#clear-exam-items").on('click', (e) => {
                $("#exam-items").val('');
                $("#clear-exam-items").hide();
                $("#exam-items-select .item-content .item-after").html('');
                e.stopPropagation();
            })
            $("#exam-items").on('change', () => {
                let value = $("#exam-items").val();
                if (value) {
                    $("#clear-exam-items").show();
                }
                else {
                    $("#clear-exam-items").hide();
                }
            })

            // 检查类别可清除
            $("#clear-exam-category").on('click', (e) => {
                $("#exam-category").val('');
                $("#clear-exam-category").hide();
                $("#exam-category-select .item-content .item-after").html('');
                e.stopPropagation();
            })
            $("#exam-category").on('change', () => {
                let value = $("#exam-category").val();
                if (value) {
                    $("#clear-exam-category").show();
                }
                else {
                    $("#clear-exam-category").hide();
                }
            });


            //获取检查设备选项
            fetch(`/api/advanceSearch/getExamDeviceOptions`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                let response = res.json().then((result) => {
                    $("#select-exam-device").html("");
                    if (result.length > 0) {
                        $("#select-exam-device").append(getStr(result));
                    }
                });
            });

            // 获取检查类别选项
            fetch(`/api/advanceSearch/getExamCategoryOptions`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                let response = res.json().then((result) => {
                    $("#exam-category").html('');
                    $("#exam-category").append(getStr(result.data.options));
                });
            });

            // 下拉选项html
            const getStr = (items) => {
                let html = '';
                items.map((item) => {
                    if (item.children && item.children.length > 0) {
                        html += `<optgroup label="${item.label}" oid="${item.label}" ></optgroup>`
                    }
                    else {
                        html += `  <option value="${item.value}">${item.label}</option>`;
                    }
                });
                return html;
            }
        })

        return $render;
    };
</script>
